﻿@page "/tooltips"

<h3>Tooltip 提示工具条</h3>

<h4>提供鼠标悬停或者获得焦点后显示提示框</h4>

<DemoBlock Title="基础用法" Introduction="常用于展示鼠标 hover 时的提示信息" Name="Nomal">
    <div class="d-flex flex-column w-100 tooltip-demo">
        <div class="d-flex justify-content-center">
            <BootstrapInput Value="@BottomString">
                <Tooltip Placement="Placement.Bottom" Title="Tootip" />
            </BootstrapInput>
        </div>
        <div class="d-flex justify-content-between align-items-center flex-fill">
            <BootstrapInput Value="@RightString">
                <Tooltip Placement="Placement.Right" Title="Tootip" />
            </BootstrapInput>
            <BootstrapInput Value="@LeftString">
                <Tooltip Placement="Placement.Left" Title="Tootip" />
            </BootstrapInput>
        </div>
        <div class="d-flex justify-content-center">
            <BootstrapInput Value="@TopString">
                <Tooltip Placement="Placement.Top" Title="Tootip" />
            </BootstrapInput>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Button 组件提示框" Introduction="提供鼠标悬停或者获得焦点后显示提示框" Name="Button">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3">
            <Button>
                @TopString
                <Tooltip Placement="Placement.Top" Title="Tootip" Trigger="click" />
            </Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Button>
                @LeftString
                <Tooltip Placement="Placement.Left" Title="Tootip" Trigger="click" />
            </Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Button>
                @BottomString
                <Tooltip Placement="Placement.Bottom" Title="Tootip" Trigger="click" />
            </Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Button>
                @RightString
                <Tooltip Placement="Placement.Right" Title="Tootip" Trigger="click" />
            </Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="测试组件" Introduction="尝试新做一个用起来比较舒服的组件，可尝鲜使用，后期组件名字可能会更改" Name="BootstrapTooltip">
    <p>通过 <code>BootstrapTooltip</code> 对其他组件或者 <code>HTML</code> 元素进行包裹，使其被包裹对象具有 <code>Tooltip</code> 功能</p>
    <p>本例中通过 <code>BootstrapTooltip</code> 包裹一个图标，鼠标移动到图标上时，显示预设 <code>Tooltip</code> 使用更简单快捷</p>
    <Pre>&lt;BootstrapTooltip Title="Test tooltip"&gt;
    &lt;i class="fa-solid fa-flag" /&gt;
&lt;/BootstrapTooltip&gt;</Pre>
    <BootstrapTooltip Title="Test tooltip">
        <i class="fa-solid fa-flag" />
    </BootstrapTooltip>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
